<template>
    <div class="zhuanlan">
        <myheader></myheader>
        <!-- 图片 -->
        <div class="img">
      <div class="img-item">
      <img  class="nav-image" src="@/assets/1.png" alt="" />
      </div>
      <div class="detail">
        <ul>
          <li v-for="item in data.list" :key="item._id">
            <h2 class="p">{{ item.title }}</h2>
            <div class="box">
              <img  :src="item.image?item.image.url :'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fb8e78d45-03a0-4737-9873-d55ff285e7ae%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681026148&t=b3efead01d3f824ad8d99b3ba3f82dda' " alt="" />
              <div>{{ item.excerpt }}</div>
            </div>
            <p>{{ item.createdAt }}</p>
          </li>
        </ul>
      </div>
    </div>
    </div>
</template>
<script lang="ts" setup>
import myheader from '@/components/MyHeader'
import {useRoute} from "vue-router"
import { reactive} from  'vue'
import {onceList} from "@/utils/api"

const {query} =useRoute()
const data =reactive({
     column:{
        id:query.id,
        currentPage:1,
        pageSize:5
     },
     list:[]  ,  //数据
})
console.log(data.column,40);

onceList(data.column).then(res=>{
    console.log(res,38);
    data.list =res.data.list
    console.log(res.data);
    
})


</script>
<style lang="scss" scoped>
.img {
  margin: 10px auto;
  width: 800px;
  height: 150px;
  border-bottom: 1px solid #000;
  //   text-align: center;
  .img-item {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    .nav-image{
          width: 200px !important;
          height: auto;
    }
    
  }
}

ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    box-sizing: border-box;
    padding: 20px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 15px #ccc;
    .box{
        display: flex;
        img{
            width: 150px;
            height: 100px;
            margin: 0 10px;
        }
    }
  }
}
.detail{
  text-align: center;
}
.p:hover{
 cursor:pointer;
 color: #0d6efd;
}
</style>